<template>
	<view class="container">
		<tui-navigation-bar :isFixed="true" :isOpacity="true" splitLine :zIndex="99999" :scrollTop="0" backgroundColor="#fff" color="#333">
			<view style="height: 40px;display: flex;align-items: center;">
				<view style="width: 15rpx;" @click="handleBack"></view>
				<u-icon  name="arrow-left" size="45" color="#333" @click="handleBack"></u-icon>
			</view>
		</tui-navigation-bar>
		<view :style="{height: headerHeight + 'px'}"></view>
		<image class="bg-img" src="/cutout/组 34@1x.png"></image>
		<view class="header">
			<view class="title">帮组名单</view>
			<view class="tips">*此链接将在活动开始后失效</view>
			
			<view class="list">
				<view class="tag">报名中</view>
				<view class="list-box">
					<view class="list-img">
						<image class="thumb-img" src=""></image>
					</view>
					<view class="list-content" @click="handleSettingClick">
						<view class="name">LPL2024锦标赛足球杯</view>
						<view class="label">
							<view class="txt">
								<view class="icon">
									<tui-icon name="clock" size="32rpx"></tui-icon>
								</view>
								<view class="list-txt">时间：20:00-22:00 周三 05.31</view>
							</view>
						</view>
						<view class="label">
							<view class="txt">
								<view class="icon">
									<tui-icon name="gps" size="32rpx"></tui-icon>
								</view>
								<view class="list-txt">1478.6km·青秀区柳沙体育公园-球场</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-container">
			<view class="title">帮组用户</view>
			<view class="content">
				<help-user-list v-for="item in 10" :item="{}"></help-user-list>
			</view>
		</view>
		<view class="footer">
			<u-button open-type="share" customStyle="border-color:#63D1D6; background: #63D1D6;padding:22rpx; border-radius: 38rpx;color: #fff;">转发分享活动</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerHeight: 64,
			}
		},
		onLoad(params) {
			console.log(params);
			this.params = params;
		
			let system = getSystemInfo();
			if(system) {
				this.headerHeight = 44 + (system.statusBarHeight || 20);
			}
		},
		methods: {
			handleBack(){
				uni.navigateBack()
			},
			handleSettingClick() {
				uni.navigateTo({
					url: '/pages/help-group/detail',
				})
			},
		}
	}
</script>

<style lang="scss">
	.container{
		position: relative;
		padding-bottom: 140rpx;
		// background: linear-gradient(180deg, #C2F2F9 0%, #FFFFFF 100%);
		.bg-img{
			position: fixed;
			left: -2rpx;
			top: 0;
			right: 0;
			width: 754rpx;
			height: 676rpx;
			z-index: -1;
			pointer-events: none;
		}
		.header{
			position: relative;
			padding: 22rpx;
			.title{
				position: relative;
				color: #000000;
				font-size: 48rpx;
				font-weight: 500;
				margin-top: 57rpx;
			}
			.tips{
				color: #464646;
				font-size: 24rpx;
			}
			.list{
				position: relative;
				
				padding: 22rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				margin-top: 28rpx;
				overflow: hidden;
				.tag{
					position: absolute;
					left: 0;
					top: 0;
					display: inline-block;
					transform: translate(-54rpx,-16rpx) rotate(-45deg);
					z-index: 1;
					padding: 50rpx 50rpx 10rpx 50rpx;
					color: #3D3D3D;
					font-size: 24rpx;
					background: linear-gradient(92deg, #4EFAFF 0%, #9FF9FF 96%);
				}
				.list-box{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.list-img{
						position: relative;
						display: inline-block;
						.thumb-img{
							background: #D8D8D8;
							height: 142rpx;
							width: 166rpx;
							border-radius: 14rpx;
						}
					}
					.list-content{
						position: relative;
						flex: 1;
						padding-left: 14rpx;
						.name{
							color: #3D3D3D;
							font-size: 28rpx;
							padding-bottom: 28rpx;
						}
						.label{
							color: #AEAEAE;
							font-size: 24rpx;
							.txt{
								display: flex;
								align-items: center;
								justify-content: flex-start;
							}
							
						}
					}
				}
				
			}
		}
		.content-container{
			position: relative;
			padding: 0 18rpx;
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			background: #FFFFFF;
			margin-top: 34rpx;
			.title{
				color: #000000;
				font-size: 32rpx;
				font-weight: 500;
				padding-bottom: 32rpx;
			}
			.content{
				position: relative;
				
			}
		}
		.footer{
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 12rpx 30rpx 76rpx 16rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 2rpx solid #EBEAEC;
		}
	}
	
</style>
